<template>
    <div :class="cns" @click="toggle" :disabled="disabled"></div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, Ref } from 'vue'

export default defineComponent({
    props:{
        type:{
            type:String
        },
        disabled:{
            type:Boolean,
            default:false
        },
        value:{
            type:Boolean,
            default:false
        }
    },
    setup(props,{emit}){
        const topTheme = inject<Ref<string>>("theme")
        const cns = computed(()=>{
            const theme = props.type||topTheme?.value||"primary"
            const cns = {
                'ph-switch':true,
                'ph-active':!!props.value
            } as Record<string,boolean>
            cns['ph-switch-'+theme] = true
            return cns
        })
        const toggle = ()=>{
            if(props.disabled)return
            emit("change",!props.value)
        }
        return {toggle,cns}
    }
})
</script>
<style lang="scss" scoped>
@import '../../assets/scss/predef.scss';
.ph-switch{
    --ph-switch-theme:var(--ph-theme);
    @include input();
    padding: 0;
    display: inline-block;
    width:calc(var(--phx) * 3.5714);
    height: calc(var(--phx) * 1.7857);
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    backface-visibility: hidden;
    border-color: var(--ph-form-border);
    background-color: #FFF;
    transition: all .3s ease;
    cursor: pointer;
    z-index: 1;
    &-primary{
        --ph-switch-theme:var(--ph-primary)
    }
    &-success{
        --ph-switch-theme:var(--ph-success)
    }
    &-danger{
        --ph-switch-theme:var(--ph-danger)
    }
    &-warning{
        --ph-switch-theme:var(--ph-warning)
    }
    &:after{
        position: absolute;
        content: "";
        width: calc(var(--phx) * 1.1428);
        height: calc(var(--phx) * 1.1428);
        border-radius: 50%;
        top:0;
        bottom:0;
        margin: auto;
        left: 0px;
        background-color: var(--ph-switch-theme);
        transform: translateX(calc(var(--phx) * 0.2998857));
        transition: all .3s ease;
    }
    &.ph-active{
        background-color: var(--ph-switch-theme);
        border-color: var(--ph-switch-theme);
        &:after{
            transform: translateX(calc(var(--phx) * 2));
            background-color: #FFF;
        }
    }

    &[disabled=true]{
        cursor: default!important;
        opacity: .5;
    }
}
</style>
